<template>
<div class="window">
  <div class="alert">
      <h2>关于:</h2>
      <p class="text">这个应用可以用来追踪你选择城市的当前天气</p>
      <h2>如何使用:</h2>
      <p class="text">
        1.点击搜索框输入你希望追踪的城市<br/>
        2.在搜索结果中选中一个城市，你将获取当地最新的天气<br/>
        3.点击右侧的＋号可以将追踪城市的天气情况保存在首页
      </p>
      <h2>移除城市:</h2>
      <p class="text">
        如果你不想在首页关注某个城市,可以通过底部的按钮删<br>
        除它
      </p>
      <button class="btn" @click="closeShowPop()">关闭</button>
    </div>
</div>
</template>

<script>
import { useMainStore } from '../../pinia/index.js'
export default {
setup(){
  const mainStore = useMainStore()
  const closeShowPop = ()=>{
    mainStore.closeShowPop()
  }
  return{
    mainStore,
    closeShowPop,
  }
}
}
</script>

<style>
.alert{
  width: 325px;
  height: 295px;
  background: rgb(255, 255, 255);
  padding: 1rem;
  box-sizing: border-box;
  margin-left: 605px;
  margin-top: 130px;
}
.alert .text{
  font-size:0.75rem;
  margin-bottom: 1rem;
}
.alert h2{
  font-size: inherit;
  font-weight: inherit;
}
.alert .btn{
  width: 72px;
  height: 32px;
  background: rgb(0,102,138);
  color: rgb(255, 255, 255);
  border: none;
}
.window{
  overflow: hidden;
}
</style>